import Popup from "@/components/Popup/Popup";
import { defineComponent, reactive, ref } from "vue";
import to from "await-to-js";
import styles from "./Add.module.less";
import _ from "lodash";
import { message } from "ant-design-vue";
export default defineComponent({
  props: {
    service: {
      type: Object,
    }
  },
  emits: ["change"],
  setup(props, { expose, emit }) {
    const addPopupRef = ref(null as any);
    const name_check = async (_rule: any, value: string) => {
      if (!value) {
        return Promise.reject('请输入名称!');
      }
    }
    // 表单验证
    const rules = {
      name: [{ required: true, validator: name_check, trigger: 'change' }],
    }
    const state = reactive({
      type: "add",
      form: {
        pid: 0,
        id: null,
        name: null,
        status: 0,
        sort: 0,
      },
      options: {
        pid: [
          {
            id: 0,
            name: '作为一级菜单',
            children: [],
          }
        ],
      }
    })
    const editing = ref(false);
    // 获取分类树
    const getTreeList = async () => {
      const [err, res]: any = await to(props.service?.tree());
      if (!err) {
        state.options.pid[0].children = res.data?.data || [];
      }
    }
    // 获取分类详情
    const getDetail = async () => {
      const [err, res]: any = await to(props.service?.detail(state.form.id));
      if (!err) {
        state.form.pid = res?.data?.data?.pid || 0;
        state.form.id = res?.data?.data?.id || null;
        state.form.name = res?.data?.data?.name || null;
        state.form.status = res?.data?.data?.status || 0;
        state.form.sort = res?.data?.data?.sort || 0;
      }
    }
    // 打开弹窗
    const open = async ({ type, parentId, id }) => {
      state.type = type;
      await getTreeList();
      state.form.pid = parentId;
      state.form.id = id;
      if (type === 'edit') {
        await getDetail();
      }
      addPopupRef.value.open();
    }
    // 提交
    const submit = async () => {
      editing.value = true;
      const params = _.cloneDeep(state.form);
      const [err, res]: any = await to((state.type === 'edit' ? props.service?.edit : props.service?.add)(params));
      if (!err) {
        message.success(state.type === 'edit' ? '编辑成功' : '添加成功');
        addPopupRef.value.close();
        emit('change');
      }
      editing.value = false;
    }
    expose({
      open,
    })
    return () => (
      <Popup ref={addPopupRef}
        title={state.type === 'edit' ? "编辑分类" : "添加分类"}
        width="800px"
        oriState={state}
        v-slots={{
          footer: () => <>
            <a-button type="primary" loading={editing.value} onClick={() => { submit() }}>确定</a-button>
            <a-button onClick={() => { addPopupRef.value.close() }}>取消</a-button>
          </>
        }}
      >
        <div class={styles.container}>
          <div class={styles.formBox}>
            <a-form model={state.form} rules={rules} label-col={{ style: { width: '130px', marginRight: '10px' } }} wrapper-col={{ span: 28 }}>
              <a-form-item label="上级" name="pid">
                <a-tree-select
                  v-model:value={state.form.pid}
                  tree-data={state.options.pid}
                  placeholder="请选择上级"
                  fieldNames={{
                    label: 'name', value: 'id', children: 'children'
                  }}
                ></a-tree-select>
              </a-form-item>
              <a-form-item required label="名称" name="name">
                <a-input v-model:value={state.form.name} placeholder="请输入名称" />
              </a-form-item>
              <a-form-item label="排序" name="sort">
                <a-input-number min={0} v-model:value={state.form.sort} placeholder="请输入排序" />
              </a-form-item>
              <a-form-item label="是否可用" name="disabled">
                <a-radio-group
                  v-model:value={state.form.status}
                  name="radioGroup"
                >
                  <a-radio value={0}>正常</a-radio>
                  <a-radio value={1}>停用</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </Popup>
    )
  }
})